<template>
  <a-modal
    title="修改密码"
    :visible="isPasswordModalVisible"
    @ok="() => handlePasswordOk()"
    @cancel="() => (isPasswordModalVisible = false)"
    transitionName="slide-fade"
    width="400px"
  >
    <a-form :model="passwordFormState" :rules="rules" ref="passwordFormRef" layout="vertical">
      <a-form-item label="原密码" name="originalPassword">
        <a-input-password v-model:value="passwordFormState.originalPassword" />
      </a-form-item>
      <a-form-item label="新密码" name="password">
        <a-input-password v-model:value="passwordFormState.password" />
      </a-form-item>
      <a-form-item label="确认新密码" name="doublePassword">
        <a-input-password v-model:value="passwordFormState.doublePassword" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import usePasswordData from '@/views/user/composables/usePasswordData';

const {
  passwordFormRef,
  passwordFormState,
  isPasswordModalVisible,
  showPasswordModal,
  handlePasswordOk,
} = usePasswordData();

const { validatePassword, validateDoublePassword } = usePasswordData();

const rules = {
  password: [{ required: true, validator: validatePassword, trigger: 'blur' }],
  doublePassword: [{ validator: validateDoublePassword }],
};

defineExpose({
  showPasswordModal,
});
</script>

<style scoped></style>
